<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { tryit } from 'radash';
import mockApi from '@/api/mock';
import { useLoading } from '@/hooks/useLoading';
import { useTableHeight } from '@/hooks/useTableHeight';
import { ListParams } from '@/api/model/mockModel';
import { useListPage } from '@/hooks/useListPage';
import { SUCCESS_CODE } from '@/constants';
import RouteItemVIew from './components/RouteItem.vue';

const containerRef = ref<HTMLDivElement>();
const { loadingStart, loadingEnd } = useLoading(containerRef);
const { searchRef, searchHeight } = useTableHeight();
const { pageData, handlePageChange, search, reset, formRef } = useListPage(getData);
const tableData: any = ref([]);

async function getData() {
  loadingStart();

  const postData: any = { ...pageData.params };
  const [err, res] = await tryit(mockApi.list)(postData);

  if (!err && res.code === SUCCESS_CODE) {
    const { list, total } = res.data;
    tableData.value = list.map((item: any) => {
      return {
        type: 'Host',
        targetAdr: 'www.testlimne.cn',
        passageway_type: 'Gateway',
        passageway_adr: '192.168.100.1',
        take_effect_time: '临时生效',
        remarks:
          '这是一行文字这是一行文字这是一行文字这是一行文字这是一行这是一行文字这是一行文字这是一行文字这是一行文字这是一行',
        error_info:
          '错误代码602 Error: Something went wrong. Please try again,错误代码602 Error: Something went wrong. Please try again',
      };
    });
    pageData.total = total;
  }
  loadingEnd();
}
const create = () => {};
onMounted(() => {
  getData();
});
</script>

<template>
  <div ref="containerRef" class="common-container route-wrap">
    <div class="content" :style="{ height: `calc(100% - ${searchHeight}px)` }">
      <div class="common-table-wrap transparent common-scrollbar" :style="{ height: `100%` }">
        <div class="route-empty" v-if="tableData.length === 0">
          <img src="@/assets/images/route-empty.png" alt="" />
          <div class="empty-tips">暂无路由，请点击下方按钮添加</div>
          <t-button class="common-button add-box" theme="primary" @click="create">
            <svg-icon class="item-icon" name="options-add"></svg-icon>
            <span>新增路由</span>
          </t-button>
        </div>
        <t-row :gutter="[16, 16]" v-else class="common-table-row info-wrap">
          <t-col v-for="(item, index) in tableData" :key="index" :lg="6" :xs="6" :xl="4" :xxl="3">
            <RouteItemVIew :data="item"></RouteItemVIew>
          </t-col>
        </t-row>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.route-wrap {
  width: 100%;
  height: calc(100vh - @headerHeight - 42px - 60px);
  .route-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 157px;
    > img {
      width: 157px;
      height: 179px;
      margin-bottom: 20px;
    }
    .empty-tips {
      font-size: 12px;
      color: #9e9e9e;
      margin-bottom: 20px;
    }
    .add-box {
      height: 28px;
      :deep(.t-button__text) {
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          margin-left: 8px;
        }
      }
    }
  }
  .info-wrap {
  }
}
</style>
